<template>
  <u-popup :show="show" mode="bottom" @update:show="handleUpdateShow">
    <div class="h-698rpx relative">
      <img class="w-full h-full" src="https://qushen-file.oss-cn-beijing.aliyuncs.com/outsourcing-2023/zhi-hui/mp/center/edit_info_bg.png"
        mode="scaleToFill" />
      <div class="flex-col-center abs-center">
        <div class="mt-46rpx text-30rpx font-500 c-#333">修改信息</div>
        <div class="mt-33rpx text-24rpx c-#999">相关操作涉及到用户信息，请授权昵称与头像</div>
        <div>{{ infoForm.nickName }}</div>
        <div class="w-660rpx mt-20rpx c-#333 text-28rpx">
          <div class="h-120rpx  flex justify-between items-center b-b-1rpx b-b-solid b-#999 " style=" --un-border-opacity: 0.15;">
            <div>头像</div>
            <div>
              <button class="w-full h-full text-start flex items-center px-0 bg-transparent  after:border-none" open-type="chooseAvatar"
                @chooseavatar="selectAvatar">
                <img class="w-78rpx h-78rpx b-rounded-50%"
                  :src="infoForm?.avatarUrl ? infoForm?.avatarUrl : 'https://qushen-file.oss-cn-beijing.aliyuncs.com/outsourcing-2023/zhi-hui/mp/center/default_avatar.png'" />
              </button>
            </div>
          </div>
          <div class="h-120rpx flex justify-between items-center b-b-1rpx b-b-solid b-#999" style=" --un-border-opacity: 0.15;">
            <div>昵称</div>
            <div>
              <input class="h-full pl-10rpx text-right" type="nickname" v-model="infoForm.nickName" maxlength="32" placeholder="请选择或输入昵称" />
            </div>
          </div>
          <div class="mt-40rpx text-24rpx c-#999">
            昵称限制为最大为32个字符
          </div>
        </div>
        <div class="w-702rpx h-72rpx my-70rpx flex-center text-0 b-rounded-8rpx"
          style="background: linear-gradient(180deg, #0099FF 0%, #0060FF 100%);" @click="handleSave">
          <span class="text-24rpx c-#fff font-500">保存</span>
        </div>
      </div>
    </div>
  </u-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { getUserInfo } = storeToRefs(userStore)
const props = withDefaults(defineProps<{ show: boolean }>(), { show: false })
const emits = defineEmits(['update:show', 'save'])

const handleUpdateShow = (value: boolean) => {
  emits('update:show', value)
}

const infoForm = ref({
  avatarUrl: getUserInfo.value.avatarUrl || '',
  nickName: getUserInfo.value.nickName || ''
})

const selectAvatar = (e: any) => {
  const tempFilePath = e.detail.avatarUrl //上传的图片地址
  const maxSizeInBytes = 1024 * 1024 // 限制大小为1MB
  uni.getFileSystemManager().getFileInfo({
    filePath: tempFilePath,
    success: (res) => {
      const fileSize = res.size
      if (fileSize > maxSizeInBytes) {
        uni.showToast({
          title: '请上传小于1MB的图片',
          icon: 'none',
          duration: 2000
        })
        return
      }
      // //图片大小符合，替换图片
      // //将更改的图片上传到服务器
      //   uni.uploadFile({
      //     url: import.meta.env.VITE_BASE_URL + '/api/ossPut', //后端接口url
      //     filePath: tempFilePath,
      //     name: 'file',
      //     success(res) {
      //       const data = JSON.parse(res.data)
      //       infoForm.value.avatarUrl = data.url
      //     }
      //   })
    }
  })
}

const handleSave = async () => {
  emits('save', infoForm.value)
}
</script>

<style lang="scss" scoped></style>
